<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML>
<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>登录</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">
	<meta name="author" content="CH.HUANG" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,Chrome=1" />
	<link rel="shortcut icon" href="favicon.ico">
	
	<!-- basic styles -->
		<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="assets/css/font-awesome.3.2.1.min.css" />
		<!--[if IE 7]>
		  <link rel="stylesheet" href="assets/css/font-awesome-ie7.min.css" />
		<![endif]-->
		<!-- ace styles -->
		<link rel="stylesheet" href="assets/css/ace.min.css" />
		<link rel="stylesheet" href="assets/css/ace-rtl.min.css" />
		<!--[if lte IE 8]>
			<link rel="stylesheet" href="assets/css/ace-ie.min.css" />
		<![endif]-->
		<!-- inline styles related to this page -->
		<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
		<!--[if lt IE 9]>
			<script src="assets/js/html5shiv.js"></script>
			<script src="assets/js/respond.min.js"></script>
		<![endif]-->
		
	<style type="text/css">
		.input-checkCode{
			width: 150px;
			float: left;
		}
		.codeImg{
			height:34px;
			margin-left: 15px;
		}
	</style>
	
	<!-- basic scripts -->
		<!--[if !IE]> -->
		<script src="assets/js/jquery-2.0.3.min.js"></script>
		<!-- <![endif]-->
		<!--[if IE]>
		<script src="assets/js/jquery-1.10.2.min.js"></script>
		<![endif]-->
		<!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='assets/js/jquery-2.0.3.min.js'>"+"<"+"/script>");
		</script>
		<!-- <![endif]-->
		<!--[if IE]>
		<script type="text/javascript">
		 window.jQuery || document.write("<script src='assets/js/jquery-1.10.2.min.js'>"+"<"+"/script>");
		</script>
		<![endif]-->
		<script type="text/javascript">
			if("ontouchend" in document) document.write("<script src='assets/js/jquery.mobile.custom.min.js'>"+"<"+"/script>");
		</script>
		<script src="assets/js/bootstrap.min.js"></script>
		<script src="assets/js/jquery.cookie.js"></script>
		<script src="assets/js/bootbox.min.js"></script>
		<script src="assets/js/jquery.base64.js"></script>
		<script src="assets/js/stringGroup.min.js"></script>
		<script src="assets/js/commonAjax.js"></script>
		
		<script type="text/javascript">
			$(function(){
				if ($.cookie("remember")=="true" && $.cookie('BatMan')){
					var batman = JSON.parse($.base64.atob(recover($.cookie('BatMan')), true));
					$("#username").val(batman.username);
					$("#password").val(batman.password);
					$("#remember").attr("checked","true");
				}
				
				$("#remember").click(function () {
					if ($(this).is(":checked")) {
						$(this).attr("checked","checked");
					} else {
						$(this).removeAttr("checked");
					}
				});
				
				$("#login-button").click(function(){
					var username = $("#username").val();
					if(username==null || typeof(username) == "undefined"){
						bootbox.alert("请输入用户名");
						return false;
					}
					username = username.replace(/(^\s*)|(\s*$)/g, "");
					if(username==""){
						bootbox.alert("请输入用户名");
						return false;
					}
					
					var password = $("#password").val();
					if(password==null || typeof(password) == "undefined"){
						bootbox.alert("请输入密码");
						return false;
					}
					password = password.replace(/(^\s*)|(\s*$)/g, "");
					if(password==""){
						bootbox.alert("请输入密码");
						return false;
					}
					
					var checkCode = $("#checkCode").val();
					if(checkCode==null || typeof(checkCode) == "undefined"){
						bootbox.alert("请输入验证码");
						return false;
					}
					checkCode = checkCode.replace(/(^\s*)|(\s*$)/g, "");
					if(checkCode==""){
						bootbox.alert("请输入验证码");
						return false;
					}
					
					var url = "system/login/checkLogin";
					var data = {username:username,password:password,checkCode:checkCode};
					var type = "post";
					var dataType = "json";
					$("#login-i").removeClass("icon-key").addClass("icon-spinner icon-spin");
					$("#login-button").attr("disabled","disabled");
					$.ajax({
						type : type, 
						cache : false,
			            async : true,
						url : url,
						timeout: 600000,
						data:data,
						dataType:dataType,
						success : function (json, textStatus) {
							if(json.success){
								if($("#remember").attr("checked")){
									$.cookie('remember', "true", {path:'/', expires:10});
									var batman = {username:$("#username").val(),password:$("#password").val()};
									$.cookie('BatMan', regroup($.base64.btoa(JSON.stringify(batman))), {path:'/', expires:10});
								}else{
				                    $.removeCookie('BatMan');
				                    $.removeCookie('remember');
								}
								if(json.hasSomeRoles){
									$("#userRole").empty();
									$(json.roles).each(function(index,element){
										$("#userRole").append("<option value='"+this.roleId+"'>"+this.roleName+"</option>");
									});
									$("#role-modal").modal("show");
								}else{
									location.href='<%=basePath%>'+json.url;
								}
							}else{
								bootbox.alert(json.result);
							}
							$("#login-i").removeClass("icon-spinner icon-spin").addClass("icon-key");
							$("#login-button").removeAttr("disabled");
						},
						error: function (jqXHR, textStatus, errorThrown) {
							$("#login-i").removeClass("icon-spinner icon-spin").addClass("icon-key");
							$("#login-button").removeAttr("disabled");
						}
					});
					
				});
				
				$("#role-btn").click(function(){
					post("system/login/selectRole",function (json, textStatus) {
						if(json.success){
							$("#roleModal").modal("hide");
							location.href='<%=basePath%>'+json.url;
						}else{
							bootbox.alert(json.result);
						}
					},{roleId:$("#userRole").val()});
				});
				
			});
			
			$(document).keypress(function(e) {  
		    	// 回车键事件  
		    	if(e.which == 13) {  
		   			$("#login-button").click();  
		   		}  
			}); 
		</script>
  </head>
  
  <body class="login-layout" style="padding-top: 6%;">
		<div class="main-container">
			<div class="main-content">
				<div class="row">
					<div class="col-sm-10 col-sm-offset-1">
						<div class="login-container">
							<div class="center">
								<h1>
									<i class="icon-plane green"></i>
									<span class="white">后台管理系统</span>
								</h1>
							</div>

							<div class="space-6"></div>

							<div class="position-relative">
								<div id="login-box" class="login-box visible widget-box no-border">
									<div class="widget-body">
										<div class="widget-main">
											<h1 class="center">
												<span class="black">登录</span>
											</h1>
											<h4 class="header blue lighter bigger center">
												<i class="icon-coffee green"></i>
												请输入您的用户名和密码
											</h4>

											<div class="space-6"></div>

											<form>
												<fieldset>
													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input id="username" type="text" class="form-control" placeholder="用户名" />
															<i class="icon-user"></i>
														</span>
													</label>

													<label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input id="password" type="password" class="form-control" placeholder="密码" />
															<i class="icon-lock"></i>
														</span>
													</label>
													
													<label class="block clearfix">
														<span class="block input-checkCode" >
															<input id="checkCode" type="text" class="form-control" placeholder="验证码" />
														</span>
														<img alt="获取验证码" id="codeImg" class="codeImg" src="checkCode" onmouseover="this.style.cursor='pointer'">
														<script type="text/javascript">
															$(function(){
																$("#codeImg").click(function(){
																	$("#codeImg").attr("src","checkCode?"+Math.random());
																});
															});
														</script>
													</label>

													<div class="space"></div>

													<div class="clearfix">
														<label class="inline">
															<input id="remember" type="checkbox" class="ace"/>
															<span class="lbl"> 记住密码</span>
														</label>

														<button id="login-button" type="button" class="width-35 pull-right btn btn-sm btn-primary">
															<i id="login-i" class="icon-key"></i>
															登录
														</button>
													</div>

													<div class="space-4"></div>
												</fieldset>
											</form>

										</div><!-- /widget-main -->

										<div class="toolbar clearfix" style="height:35px;"></div>
									</div><!-- /widget-body -->
								</div><!-- /login-box -->

							</div><!-- /position-relative -->
						</div>
					</div><!-- /.col -->
				</div><!-- /.row -->
			</div>
		</div><!-- /.main-container -->
		
	<!-- Modal -->
	<div class="modal fade" id="role-modal" tabindex="-1" role="dialog"
		aria-labelledby="roleModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h3 class="modal-title" >请选择角色</h3>
				</div>
				<div class="modal-body">
					<select id="userRole" class="form-control">
						<!-- <option value="1">管理员</option> -->
					</select>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
					<button id="role-btn" type="button" class="btn btn-primary">确定</button>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
